<template>
  <div class="indexHead">
    <!--搜索框-->
    <form action="/">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @click="showSearch"
      />
    </form>
    <router-link to="/sendPost">
      <van-icon name="add" />
    </router-link>
  </div>
</template>

<script>
import { searchList } from "@/api/api";
export default {
  name: "SearchHead",
  data() {
    return {
      // 瀑布流是否可见，默认可见
      WaterVisible: true,
      value: "",
      searchPost: [],
    };
  },
  methods: {
    onSearch(val) {
      // 请求搜索接口
      searchList(val).then((res) => {
        if (!val) {
          this.searchPost = [];
          this.$store.dispatch("getSearchText", "暂无搜索信息");
        } else if (res.data.total === 0) {
          this.value = "";
          this.searchPost = [];
          this.$store.dispatch("getSearchText", "暂无搜索内容");
        } else {
          this.value = "";
          this.searchPost = res.data.rows.reverse();
          this.$store.dispatch("getSearchMsg", this.searchPost);
        }
      });
    },
    showSearch() {
      // 点击时，将瀑布流不可见传入首页
      this.WaterVisible = false;
      this.$emit("headToIndex", this.WaterVisible);
    },
  },
};
</script>


<style scoped lang="less">
//搜索图标
/deep/.van-icon-search {
  font-weight: bold;
}
//发表帖子图标
.van-icon-add {
  display: inline-block;
  position: absolute;
  right: 25px;
  top: 26px;
  font-size: 24px;
}
.indexHead {
  position: relative;
  .van-search {
    padding-top: 20px;
    width: 85%;
    .van-search__content {
      border-radius: 15px;
    }
  }
}
</style>